Cara Mempercepat Loading Blog With CSS External

Funtastic blogger akan berbagi tips tentang cara mempercepat loading blog with css external, Mengingat kecepatan akses blog sangatlah penting dan berpengaruh besar untuk sebuah web blog, saya rasa trik ini sangatlah penting untuk dicoba.

Karena itulah saya berusaha memaksimalkan, semaksimal mungkin mengompres dan mengurangi berat blog saya ini. kali ini saya akan membahas Cara Agar Loading blog Lebih Cepat Dengan CSS External , Maksudnya adalah bagaimana kita menyimpan CSS (Cascading Style Sheet) ke tempat hosting agar blog sedikit ringan karena file CSS terpisah dengan file XML-nya.

Kecepatan loading blog, selain dipengaruhi oleh kecepatan koneksi, juga dipengaruhi oleh berat/ ringannya blog itu sendiri. ada banyak cara untuk mengurangi berat blog yaitu dengan mengurangi jumlah widget/ pernak-pernik blog yang tidak begitu penting, Dengan cara mengkompres kode baik CSS maupun HTML, ataupun juga bisa dengan membuat CSS External, yang diupload/disimpan di webhosting.

Dan yang akan saya bahas kali ini adalah membuat CSS External.
1. Seperti biasa, Login ke akun blogger sobat

2. Masuk Rancangan/Layout

3. Pilih Edit HTML

4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)

5. Beri tanda centang "Expand Template Widget" ataupun tidak, tidak masalah.

Perhatikan kode CSS dibawah ini, kode tersebut terletak diantara kode

<b:skin><![CDATA[/* sampai dengan sebelum kode ]]></b:skin>

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Tyrexcom
Date:     26 Feb 2012
Updated by: blogger Team
----------------------------------------------- */
#navbar-iframe{
display:none !important}
body{
background:#f5fffa;
width:980px;
color:#333;
font-size:12px;
font-family:Arial,Tahoma,Verdana;
margin:0 auto 0;
padding:0}
Potong atau Cut semua kode CSS-nya mulai dari sini sampai dengan diatas atau sebelum kode:
]]></b:skin>

6. Simpan di Notepad dengan ekstensi.css caranya: klik File, pilih Save As, beri nama file tersebut misal: Blogku.css lalu Save.

7. nah sampai disini kita sudah mempunyai file.css. Selanjutnya kita tinggal mengUpload/menyimpannya di WebHosting, misal yang saya pakai yaitu Google Site.

8. Jika sudah meng-Uploadnya, misal:

http://sites.google.com/site/tyrexcom/JavaScript/blogku.css

Penulisan untuk scriptnya menjadi seperti dibawah ini:

<link href='http://sites.google.com/site/tyrexcom/JavaScript/blogku.css' rel='StyleSheet' type='text/css'/>

Letakan kode script diatas di antara kode: ]]></b:skin> dan </head> , lihat contohnya seperti ini :

]]></b:skin>
<link href='http://sites.google.com/site/tyrexcom/JavaScript/blogku.css' rel='StyleSheet' type='text/css'/>
</head>

9. Sebelum menyimpannya, harap di Preview terlebih dahulu, bila tampilan blog tetap pada aslinya, berarti sobat berhasil mempraktekannya. dan terakhir Save Template Sobat. Sippppp Selesaiiiii.

Catatan:


Setelah mengetahui cara diatas, pasti kita akan direpotkan saat kita akan menambah kode CSS pada template blog kita, yah... mau tidak mau kita harus mengedit dan meng-Upload kembali ke webhosting sobat.

Saya rasa cukup sekian dari saya, bila sobat blogger ada yang mengalammi kesulitan, silahkan berkomentarlah disini, dan semoga saja, saya bisa membantu

 

Sumber:tyrexcom.blogspot.com

Read more »

Cara menyimpan javascript ke komputer

saya akan membahas artikel tentang Cara Menyimpan Javascrip Ke Komputer sebelumnya saya telah membuat artikel mengenai Cara Menyimpan file CSS ke Komputer.

Javascript adalah bila saya katakana adalah bahasa pemrograman khusus untuk membuat sebuah web menjadi lebih hidep pembuatanya sendiri memakan waktu lama serta harus memiliki kemampuan khusus untuk membuatnya sama seprti halnya css javascrip juga adalah coding atau code yang bisasa digunakan dalam pemrograman web namun taukah anda cara menyimpa code ini biasanya javascrip ini isinya panjang sekali dan biasanya susah untuk dimengarti unuk contoh file yang sudah jadi anda bias Download disini namun pada kali ini saya akan menjelaskan bagaimana cara menyimpan file java ini dalam html ataupun dalam XML dimasukan kedalam computer untuk nantinya agar dapat di uploads ke google code mari kita lihat saja bagimana tutorial nya namun anda harus mengetahui atau dapat membedakan mana yang dimaksud dengan kode java scrip dan kode HTML dalam artikel yg berjudul  Cara Menyimpan Javascrip Ke Komputer.

Tutorial Cara Menyimpan Javascrip Ke Komputer

• Pertama anda masuk codding anda atu XML atau HTML anda untuk mendapatknya
• Kemudian anda cari code <script type='text/javascript'> untuk awalan dan penutup </scrip> untuk akhiran jadi kode Javascrip itu terletak antara code di atas.

Contoh code Javascrip bias lihat potongan code berikut

<script language='javascript'>
function Barva(koda)
{
document.getElementById(&quot;vzorec&quot;).bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById(&quot;vzorec2&quot;).bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>

• Diatas adalah code javascrip tapi bagaimana menyimpanyanya jadi kalian harus copy code di atas 
• Anda copy code d antara <script language='javascript'> …. Code javascrip ….. </script>
• Anda copy kemudian anda buka Notepad di computer anda lalu pastekan kedalamnya
• Kemudian anda save dengan extensi filenya dengan .js contoh Javascripcontoh.JS

Mungkin cukup saja artikel saya ini semoga bermanfaat

 

Sumber: thomijasir.blogspot.com

Read more »

Cara Memanggil File CSS dari Google Code

Sekarang saya akan membahas artikel tentang Cara Memanggil File CSS dari Google Code 

Cara memanggil file dari google code dalam bentuk file css yang dapat di panggil tentu saja bisa karena google code ini memberikan kemudahan bagi penggunanya cara ini bisa digunakan untuk mempercepat loading suatu web atau blog.

Tutorial Cara Memanggil File CSS dari Google Code

1. Pertama anda masuk google code
2. Pilih file CSS  yang akan di panggil 
3. Klik kemudian anda akan masuk control file kemudian
4. Anda klik kanan dan Copy link untuk memudah kan lihat gambar berikut ini 
5. Setelah itu anda save url nya jangan sampai lupa
6. Kemudian buka halaman HTML sobat kemudian atau buka halaman xml
7. Kemudian anda copy code berikut ini di atas tag </head> atau <body> atau  <b:skin>

<link href="Your URL CSS" rel="stylesheet" type="text/css">

• kemudian anda paste kan atau masukan URL yang telah di dapat kedalam Your Url Here
• setelah itu save dan seharusnya CSS sudah dapat dipanggil secara normal 

Demikian Cara Memanggil File CSS dari Google Code.

Semoga bermanfaat.

 

Sumber: thomijasir.blogspot.com

Read more »

Cara Menyimpan file CSS blog

sekarang saya akan membahas artikel tentang Cara Menyimpan file CSS ke Komputer .

Cara Menyimpan CSS apa yang terdengar di benak anda tentang CSS ini mungkin disini saya akan menjelaskan sedikit mengenai CSS dan fungsinya sedikit tidak terlalu mendetai CSS menurut saya sendiri adalah suatu codding yang digunakan untuk bagian body atau badan HTML dan bisanya berupa style bagian layout dan bagian bagian seprti menubar dan yang lainya itu yang dinamakan CSS biasanya terdapat pada halaman html atau bias juga dapat di temukan di bagian XML dan baisanya berupa codding yang panjang dan beberapa baris namun semua itu dapat disingkat menjadi 1 baris namun saya akan menerangkan bagaimana cara menyimpannya dan cara ini sangat mudah ok saya akan langsung saja menjelaskan caranya berikut ini.

Tutorial Menyimpan File CSS

• Pertama anda masuk ke aacount blogger
• Masuk bagain HTML
• Kemudian pilih edit HTML
• Dan cari kode CSS blog sobat

Kode css ini bisanya terletak sebelum ]]></b:skin> dan biasanya panjang memiliki beberapa baris

Contoh kode CSS berikut di bawah ini :

#menubar{width:770px;height:32px;background:#de360f;float:center;margin-bottom:10px;}

#menubar ul{float:left;margin:0;padding:0;}

#menubar li{float:left;list-style:none;margin:0;padding:0;}

#menubar li a, #menubar li a:link{border-right:1px solid #F0512D;float:left;padding:8px 12px;color:#fff;text-decoration:none;font-size:13px;font-weight:bold;}

#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {color:#ffa500;text-decoration:underline;}

#menubar li li a, #menubar li li a:link, #menubar li li a:visited{font-size: 12px;background: #de360f;color: #fff;text-decoration:none;width: 150px;padding: 0px 10px;line-height:30px;}

#menubar li li a:hover, #menubar li li a:active {background: #F0512D;color: #ffa500;}

#menubar li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:170px;margin-top:32px;border:1px solid ##F0512D;}

#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{left:auto}

#menubar li:hover, #menubar li.sfhover{position:static}

• Diatas adalah contoh kode css menubar
• Kemudian anda copy code CSS tersebut
• Kemudian buka notepad di computer kamu
• Copy code css tersebut kedalam note pad dan save
• Pada bagian save ganti extensinya menjadi .css jangan .txt
• Dan save pada directory hardisk mu
• Dan file siap untuk di upload ke Hosting atau google code

Mungkin cukup saja artikel yang dapat saya sampaikan ini semoga bermanfaat

 

Sumber: thomijasir.blogspot.com

Read more »

Cara Membuat Widget Photo Slide Show di halaman Postingan

Sebuah halaman blog yang tidak ada sentuhan foto atau gambar akan terasa membosankan. Jika sudah bosan, maka pengunjung blog tidak akan lama bertahan. Bukan hanya sebagai pernak-pernik, sebuah foto juga bisa memberikan kesan tersendiri. Orang akan lebih hafal dengan gambar daripada tulisan.

Sekarang, kita akan belajar untuk membuat slide show, yaitu foto-foto yang ditampilkan secara bergantian dengan otomatis. Slide show bisa digunakan untuk menampilkan banyak foto tanpa menyita banyak space. Karena foto akan diputar layaknya sebuah video, sehingga lebih menarik dan hemat tempat.

Slide show bisa digunakan untuk menampilkan foto liburan yang banyak, atau memajang foto-foto produk untuk toko online. Cara untuk membuat slide show ini sangat mudah, tidak perlu pintar photoshop atau flash. Kita tinggal menyiapkan foto yang sudah diupload (dihosting). Kita bisa memanfaatkan post blogger, Picasa, Photobucket, dan lain-lain.

Cara Mudah Membuat Slide Show Foto di Blog
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 100%;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 100%;
   height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Foto 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
</div>

5. Ganti URL Foto 1 dengan URL foto yang sudah dihost (upload)
6. Kita bisa juga menyesuaikan tinggi foto (height) dan lebarnya.
7. Kita bisa menambahkan atau menampilkan foto lebih banyak lagi dengan menambahkan kode sama seperti <img src="URL Foto 4" /> dan seterusnya.
7. Simpan jika sudah selesai.

Demikian cara membuat widget photo slide show di halaman postingan.

Sumber: kurniasepta.blogspot.com

Read more »

Cara Mengindeks Blog/Site Di Yahoo Search Engine

Kawan- kawan blogger Indonesia yang saya banggakan, kali ini saya akan mengajak belajar bersama tentang  bagaimana cara submit blog ke yahoo. Dengan hal ini, yahoo search engine akan mengindeks blog kita. Hal ini juga bertujuan untuk menemukan error atau kesalahan di situs atau blog kita, halaman posting yang populer dan lain-lain.

Langkah Langkah submit blog ke yahoo

Langkah 1: Kunjungi Yahoo Site Explorer dan sign in dengan akun yahoo yang kamu miliki.

Langkah 2: Tambahkan blog milikmu (http://contoh.blogspot.com). Klik pada Add My Site.

Langkah 3: Proses Otentikasi situs / Authenticate dengan menambahkan meta tag pada blog atau situs.

Langkah 4: Sekarang tambahkan meta tag setelah (head tag) di blog. Kemudian klik Ready to Authenticate

Langkah 5: Sekarang klik pada tombol explore di belakang  nama blog kita. Kemudian  kita  akan melihat halaman seperti gambar di bawah ini. Kemudian klik “submit it for free “.

Langkah 6: Ada dua pilihan (a) Submit a website or webpage atau (b) submit site feed. Pertama memilih pilihan (a. Masukkan alamat blog kamu. Kemudian pilih opsi (b), dan masukkan masukkan alamat feed blog punyamu. Kawan – kawan blogger Indonesia dapat  melakukan submit url sebagai berikut:

1.atom.XML

2.rss.XML

3.feeds/comments/default

4.feeds/comments/default? Alt = rss

5.feeds/posts/default

6.feeds/posts/default? Alt = rss

Setelah beberapa hari, cobalah check blog kamu (http://namablogkamu.blogspot.com) di yahoo search engine. Mungkin blog milikmu akan terindeks apabila langkah di atas dilakukan dengan benar. Semoga Bermanfaat

Sumber: http://maiin-pintarblog.blogspot.com/2012/01/cara-mengindeks-blogsite-di-yahoo.html

Read more »

Cara Menampilkan Widget Hanya Di Halaman Tertentu

Cara Menampilkan Widget Hanya Di Halaman Tertentu - Kalian pernah melihat blog yang widgetnya gonta-ganti pada setiap halaman. Kalau pernah blog itu pasti memakai cara ini. Langsung saja kita simak kode-kode untuk menampilkan widget pada halaman yang diinginkan.
Berikut Kode Untuk Mengatur Menampilkan Widget Di Blog :

1. Menampilkan widget hanya di halaman depan saja (homepage)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
......................................................
</b:if>

2. Menampilkan di semua halaman kecuali homepage.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
......................................................
</b:if>

3. Menampilkan widget hanya di halaman Archive saja.

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
......................................................
</b:if>

4. Menampilkan widget di semua halaman kecuali halaman archive.

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
......................................................
</b:if>

5. Menampilkan widget hanya di halaman posting.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
......................................................
</b:if>

6. Menampilkan widget di semua halaman, kecuali halaman posting.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
......................................................
</b:if>

7. Menampilkan widget hanya di postingan tertentu saja.

<b:if cond='data:blog.pageType == &quot;alamat-postingan&quot;'>
......................................................
</b:if>

8. Menampilkan widget selain di postingan tertentu.

<b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'>
......................................................
</b:if>

9. Menampilkan widget hanya di halaman staticpages.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
......................................................
</b:if>

10. Menampilkan widget di semua halaman, kecuali halaman staticpages.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
......................................................
</b:if>

Catatan : Titik - titik di atas adalah kode widget yang harus di tempatkan.

---

Berikut Ini Cara Penerapan Kode Tersebut Pada Widget :

Kita ambil salah satu contoh, Misalkan sahabat lihat di blog saya ini ada widget dengan judul Translate pada sidebar dan kita akan membuat widget tersebut hanya tampil pada halaman beranda atau homepage saja, berikut caranya.

1. Silahkan login akun Blogger.com

2. Pilih menu Rancangan dan Pilih Edit/HTML
3. Setelah Itu Centang Expand Template Widget
4. Untuk menghindari terjadinya kesalahan silahkan Download Lengkap Template

5. Kemudian cari Translate gunakan Ctrl+f

6. Lalu kita cari dan perhatikan kode widget seperti ini :

<b:widget id='HTML9' locked='false' title='Translate' type='HTML'> <b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/> </b:includable></b:widget>

7. Kode di atas adalah kode widget Translate apabila kita akan menampilkan widget Translate tersebut hanya di beranda atau hompage maka sisipkan kodenya dan akan menjadi seperti ini.

<b:widget id='HTML9' locked='false' title='Translate' type='HTML'> <b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/></b:if> </b:includable></b:widget>

Keterangan: Kode yang berwarna merah adalah kode yang membuat widget hanya muncul pada homepage di blog, kita bisa lihat pada kode No.1 di atas. Pastikan posisi kode dipasang sesuai dengan tempatnya.
Sekian postingan saya kali ini semoga bisa bermanfaat.

 

Sumber: http://blogmashanif.blogspot.com/2013/02/menampilkan-widget-halaman-tertentu.html

Read more »

Cara menampilkan widget hanya pada halaman awal

Setiap kita menambahkan widget pada blog, maka secara default akan tampil pada bagian homepage (halaman awal) dan tampil juga pada bagian halaman posting lainnya. Untuk memilih widget yang hanya akan tampil pada halaman utama atau homepage saja, perlu penambahan kode perintah supaya widget tersebut hanya muncul pada halaman utama atau homepage.

Kode perintah tersebut harus kita sisipkan pada bagian widget yang kita ingin menampilkan pada halaman utama atau homepage,berikut.

• Masuk ke akun blogger kemudian masuk menu Design - Edit HTML/Edit Template
• Ceklist pada expand template widget
• Sebelum melakukan penambahan didalam template, sebaiknya backup dulu template kalian, mendownload full template

Selanjutnya pilih widget yang akan kita munculkan pada bagian homepage saja, saya ambil contoh widget "Recent Comment" setelah ketemu sisipkan 2 baris kode sebagai perintah supaya hanya muncul pada halaman utama atau homepage saja.

Untuk jelasnya perhatikan baris kode widget recent comment, kode yang berwarna merah adalah kode untuk memunculkan widget supaya hanya muncul di homepage.

<b:widget id='HTML2' locked='false' title='recent comment' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:if> </b:includable> </b:widget>

Kemudian save template, sekarang widget hanya akan muncul pada halaman utama atau homepage, bila kita masuk ke salah satu halam post, widget tersebut tidak akan muncul.

Sumber: http://alfijadul.blogspot.com/2012/06/cara-menampilkan-widget-hanya-pada.html

Read more »

Cara membuat FB Like Box melayang dengan tombol close

 

Kreasi FB Like Box melayang ini dapat anda coba untuk semakin mempercantik blog kamu.Selain itu pengunjung blog kamu akan selalu melihat Likebox ,sehingga mereka tidak akan lupa memberikan like sebelum meninggalkan halaman blog kamu.Dan Kamu pasti senang kan jika likes fanpage kamu semakin cepat bertambah.

Keistimewaan dari like box melayng ini adalah muncul disebelah kiri dari kontent(untuk wide screen),sehingga tidak akan menghalangi artikel dan navigasi.Selain itu juga  adanya tombol Close,sehingga bisa di sembunyikan oleh pengunjung jika mereka anggap mengganggu.

Cara bekerjanya: jika pengunjung melakukan scrooling kebawah atau keatas,FB like box tersebut tetap berada pada posisinya (mengambang) dengan halus.
Kamu bisa memasangnya di blogspot ataupun blog wordpress hosting sendiri.
Code dan cara pemasangan FB Like Box melayang dengan tombol Close.
Kreasi ini hanya menambahkan sedikit code Javascript ,ikuti langkah langkah berikut.

1. Persiapkan dulu code dari plugin likeboxnya terlebih dahulu dengan memakai ukuran : width 140px dan height 270 px.Kamu bisa menyesuaikan ukurannya dengan template blog kamu nanti.Ukuran yang dipakai memang tidak terlalu lebar agar tidak menghalangi kontent.

2. Buat New widget HTML/Javascript (blogspot), kemudian copypaste code berikut:

<style type="text/css">
#fixed{
position:absolute;
margin-top:140px;
background-color: #fff;
width: 140px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 40 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.dobumentElement : document.body
}
function get_cookie(Name) {
var$20search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("fixed").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("fixed").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var20pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("fixed");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="fixed">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="http://demandware.edgesuite.net/aaca_prd/on/demandware.static/Sites-ninewest-Site/-/default/v1340878667943/images/productDetail/b_close_wText.gif" /></a></div>

Masukkan disini Code dari LikeBox FB Kamu

</div>


Kamu bisa melakukan penyetelan atau penyesuaian dengan merubah nilai pada code yang diberi warna merah.

3. Ganti tulisan yang berwarna biru pada script diatas, dengan Code dari plugin FB LikeBox yang sudah kamu buat dan sediakan tadi.

4. Simpan Widget
5. Selesai dan coba.

Sumber: http://www.spiderbeat.com/2012/10/cara-membuat-fb-like-box-melayang.html

Read more »

Cara Membuat Iklan Melayang Di Footer Dengan Tombol Close

Kali ini postingan saya akan membahas tentang Cara Membuat Iklan Melayang Di Footer Dengan Tombol Close.

Salah satu keunggulan dari memasang iklan pada footer blog adalah iklan sobat dapat dilihat lebih jelas pada setiap postingan. Cara ini dianggap lebih unggul daripada memasang iklan pada sidebar. Ini karena pengunjung akan lebih banyak melihat ke bawah saat sedang membaca postingan atau ingin berkomentar daripada melihat ke samping.

Nah, bagi sobat yang memasang iklan melayang dengan tombol close pada footer blog sobat, silahkan baca dengan seksama tutorial yang saya tulis di bawah ini :

1. Login ke Blogger.com
2. Pilih Tata Letak => Tambah Gadget
3. Kemudian salin kode di bawah ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>

</script><br />

<script type='text/javascript'>

$(document).ready(function() {

$('img#closed').click(function(){

$('#btm_banner').hide(90);

});

});

</script>

<style type='text/css'>

div#btm_banner {

bottom: 0;

position: fixed;

width: 100%;

opacity: 0.9;

left: 0;

}

div#btm_banner img{

border:0;

cursor:pointer;

}

</style>

<div style='height: 0px;'></div>

<div align='center' id='btm_banner' style='height: 90px; z-index: 9999;'>

<div style='text-align: right; width: 728px; height: 6px;'>

<img id='closed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZswQtbdtO-JpN5uWjGr9YRwM_dGNj0tUt-4fN8z1NPGhAqBv1yYjY7vg0rCjyxBlY-V4uSrHBeCrcHzEUo7lpLBHG6_vsaZRgMM47JfgsBqfmYrnihsQYxoXnI_tY20gKlNWs5lbx5xOl/s1600/close-icon.png'/></div>

<div style='clear: both;'></div>

<p>

<p><center>

Masukan script iklan anda di sini

</center></p>

</p>

</div>

4. Ganti kode yang berwarna merah dengan script iklan anda.

5. Kode yang berwarna biru adalah panjang dan lebar iklan yang akan ditampilkan.

6. Klik Simpan.

Sekian artikel Cara Membuat Iklan Melayang Di Footer Dengan Tombol Close. Semoga bisa membantu.

Sumber: http://artikeldewawijaya.blogspot.com/2013/03/membuat-iklan-melayang-di-footer.html#

Read more »

Cara update postingan blog via email

Semakin hari orang yang ngeblog (blogger) tak ingin susah dalam mengelola blognya, apalagi soal cara posting. Karena untuk mengumpulkan kata menjadi sebuah tulisan saja sudah semakin sulit, (baca: semakin malas mengupdate blog). Sehingga kini platform blog banyak memberikan tawaran yang memungkinkan banyak cara untuk posting ke blog, tidak harus login ke akun blognya.

Bisakah blog diupdate via email? Bisa. Teringat dengan posterous yang merupakan salah satu platform blog, memang tidak terlalu populer, karena kemudahan dalam posting yaitu bisa lewat email membuatnya banyak yang suka. Di blogger.com atau blogspot yang merupakan salah satu website yang masuk 10 besar di Indonesia versi alexa yang paling ramai, Blogger pun juga bisa diupdate via email.

Bagi yang sering ngubek-ngubek dasbor atau settingan blognya mungkin pernah menemukan. Tetapi yang belum tahu, Belajar Ngeblog di BLOG akan berbagi cara mengatur blognya agar bisa diupdate lewat email. Sehingga akan memiliki alamat email pribadi dan rahasia untuk memposting konten ke blognya.
Cara Update/Posting ke Blog lewat Email

1. Login ke akun blogger.com
2. Pilih Setelan lalu klik Seluler dan email
3. Di settingan Email, ketiak kata rahasia (scret word) untuk pelengkap alamat email

4. Selanjutnya ada pilihan segera publikasikan dll, jika ingin mengaktifkan pilih saja.
5. Jangan lupa Simpan setelah jika sudah selesai.

Sekarang kita sudah punya alamat email yang apabila kita mengirim ke alamat email tersebut akan segera dipublikasikan di blog. Misalnya alamat email itu, adminblogku.update@blogger.com, jika kita benar-benar mengaktifkan fitur ini jangan sampai alamat email itu dibagikan atau diberitahukan ke khalayak ramai, untuk menghindari hal yang tidak diinginkan. Kecuali jika ingin membuat blog keroyokan yang diupdate oleh beberapa orang.

Dibalik kemudahan dari update atau posting blog lewat ini tentu ada juga kekurangannya, diantaranya: Kita tidak bisa mengatur (Setelan entri) tersebut seperti label, atau meta tag description. Semoga tutorial sederhana ini memberikan pengetahuan baru dan bermanfaat.

Read more »

Cara membuat blog iklan baris auto posting + free template

 

Pada postingan kali ini, admin akan berbagi tentang tutorial cara membuat blog iklan baris auto posting. Mungkin sobat blogger udah pernah melihat/berkunjung ke beberapa blog "pasang iklan  gratis". Jika sobat memasang iklan sobat diweb iklan baris, maka otomatis iklan sobat akan langsung muncul! Kenapa bisa begitu??

Nah, maka disini admin akan berbagi cara membuatnya, yaitu cara membuat form pemasangan iklan. Seperti yang kita ketahui, pada umumnya web pemasangan iklan baris gratis menyediakan suatu form, yaitu form pemasangan iklan baris gratis. Dimana jika visitor mengisi dan melengkapiform tersebut, maka dengan mengklik tombol submit, maka secara otomatis iklan/data yang diisi oleh visitor tersebut langsung terposting pada blog. Nah, bagaimanakah cara pembuatannya?? Disini akan dibahas! ^_^

Dalam membuat yang sepert itu sebenarnya tidak memerlukan script khusus, melainkan cukup memakai trick sederhana. Trick sederhana itu adalah dimana sebenarnya visitor mengirim data/informasi yang telah diisi ke email si penyedia iklan. Nah, selanjutnya data/informasi dibuat auto posting ke blog melalui email, jadi setiap ada email yang masuk, akan langsung di forward ke blog iklan gratis tersebut. Bagaimana?? apakah ada sedikit gambaran tentang cara kerjanya??? Jika sudah ada, langsung aja ke cara pembuatannya!

Cara membuatnya:
Bag. I. Pengaturan pada blogspot. Disini kita akan mengatur dan mengaktifkan email posting.

1. Masuk ke akun blog anda, kemudian >> setting >> mobile and email
2. Kemudian silahkan isi "Posting using email" dengan apa saja yang anda suka.
misalnya "emailsobat.secretdisini@blogger.com"
3. Pilih Publish Email immediatly, dan Save.

Bag. II. Pengaturan pada aplikasi pengirim email.

Nah, untuk pengaturan pengiriman emailnya sebenarnya sobat bisa bebas berkreasi sendiri. Sobat bisa memilih membuat script php pengiriman emailnya sendiri, atau menggunakan aplikasi yang disediakan beberapa website. Nah, dalam hal ini, kita memilih jalan yang mudah, yaitu menggunakan dari aplikasi pengirim email, yaitu admin menggunakan "jotform". Pengiriman email disini maksudnya agar kita dapat mengatur bagaimana posisi email yang akan di tampilkan nantinya.

Berikut langkah-langkah pengaturannya:
1. Silahkan buka dan mendaftar di http://www.jotform.me/
2. Silahkan berkreasi sesuai dengan apa yang anda inginkan. Dimana ini adalah tata letak dan pengaturan untuk formasi penulisan yang akan tampil di blog nantinya.

Namun ada beberapa hal yang perlu diperhatikan:
Pada tab Setup & Embed
    -  Email Alerts > Add New Email > Notification Email > Recipient E-Mail isi email pengeposan
       di Blogger tadi (emailsobat.secretdisini@blogger.com)
    -  Klik Switch to Text Mode (di kanan bawah) kemudian hapus semua kode
    -  Klik kolom Subject, klik Judul Iklan sebelah kanan

  -  Dibawahnya klik Gambar:Image, Isi Iklan, kemudian tulis Dikirim Oleh , klik lagi dibawahnya
Nama, Kota, No Telp dan Website, klik Finish. Hasilnya kurang lebih seperti ini :

Disini anda bebas berkreasi, serta dapat juga menambahkan atribut-atribut lain, seperti "<a><i><u> dan lainnya. Terserah dengan kreasi sobat!

3. Klik "source code" kemudian sobat akan mendapatkan kode/scriptnya. Untuk selanjutnya, silahkan pasang/copas ke blog sobat!

Nb: Selain jotform, sobat juga bisa mendaftar di web lain, seperti emailme dan lainnya.

Read more »

Cara Membuat Permalink di Blog

 

Permalink adalah istilah untuk link aktif permanen pada suatu artikel di halaman posting yang di biasanya di letakan di bawah atau sesudah postingan, fungsinya Permalink tidak lain adalah untuk meningkatkan seo on page blog sobat. Biasanya sobat menemukan artikel seperti ini dengan keyword cara membuat link tetap atau tambahan detail postingan yang letaknya di bawah artikel, sebelum sobat tahu bahwa namanya adalah permanen link.

Cara Membuat Permalink di Blog :

• Login Ke Blogger
• Pilih Template >> Edit HTML >> Conteng Expand Template Widget
• Cari kode ]]></b:skin> untuk mempermudah gunakan Ctrl+F atau F3
• Letakan kode berikut tepat di atas kode ]]></b:skin>

.permalink-blog{border:1px solid #DDD; padding:10px; background:#fff; font-size:13px}
.permalink-blog a{background:none}
.permalink-blog:hover{background:#F8F8F8}

• Setelah itu sobat cari kode <data:post.body/>
• Letakan kode berikut tepat di bawah kode <data:post.body/> ( jika sobat menggunakan readmore otomatis biasanya akan ada beberapa kode <data:post.body/> Pilih yang ke dua )

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='permalink-blog' style='padding:5px 5px 5px 5px; overflow: auto; width: auto; height: auto; text-align: justify;'>
Anda baru saja membaca artikel yang berkategori <a expr:href='data:post.url'><b:loop values='data:post.labels' var='label'><b><data:label.name/></b><b:if cond='data:label.isLast != &quot;true&quot;'> /</b:if> </b:loop></a> dengan judul <a expr:href='data:post.url'>&quot;<span style='color:blue;'><strong><data:blog.pageName/></strong></span>&quot;</a>. Anda bisa bookmark halaman ini dengan URL <span style='color:red;'><b><data:post.url/></b></span>.</div></b:if>

• Simpan

Terimakasih sudah membaca artikel mengenai "Cara Membuat Permalink di Blog". Semoga bisa bermanfaat untuk sobat semua

Read more »

Slide Show Postingan Blog Move Down

Widget slideshow postingan blog, widget ini bisa kamu manfaatkan untuk menarik perhatian visitor. Kalau mereka tertarik dengan widget slideshow ini kemudian meng-kliknya, maka page postinganmu mejadi semakin ramai dan meningkatkan pagerank blog kamu.

berikut langkah-langkahnya:

• masuk ke dashboard blogger
• pilih tata letak
• pilih add/tambahkan gadget
• pilih HTML/javascript
• masukkan kode berikut:

<style type="text/css">
#rp_plus_img{height:385px;overflow:hidden;border:0;padding:6px 10px 14px 5px;background: transparant;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:solid 1px #585858; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:85px;padding:5px;list-style:none;}
#rp_plus_img a{color:#000;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:12px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:65px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/dhany99487/widget/Slideshow_post_movedown.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 20;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

• Untuk kode berwarna merah, merupakan jumlah post yang tertayang di slide show, bisa siubah jumlahnya sesuai kebutuhan
• Untuk kode berwarna biru, merupakan jumlah post total yang bakal ditayangkan, bisa diubah jumlahnya sesuai kebutuhan
• selesai, simpan

Read more »

Cara membuat daftar isi dengan drop down

Selain scroll box, menu drop down juga sangat berguna sekali untuk menghemat tempat, terutama bila halaman web atau blog sudah penuh dan sementara masih banyak yang ingin tetap ditampilkan pada halaman tersebut.
Bedanya tampilan menu drop down lebih praktis dibanding dengan scroll box, dan menu drop down hanya berfungsi untuk membuat sebuah List atau daftar. Anda bisa gunakan menu drop down ini untuk membuat daftar isi pada web atau blog anda.
Bila anda berminat, dibawah ini adalah contoh bentuk menu drop down :

Judul Menu Drop Down

TUTORIAL BLOGGERJudul Artikel Judul Artikel Judul Artikel Judul Artikel Judul Artikel Judul Artikel Judul Artikel Judul Artikel

Berikut kodenya, silahkan anda bisa copy kodenya dan ganti ULR Artikel sert Judul Artikelnya:

<h3>Judul Menu Drop Down</h3>
<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" name="menu-drop-down"><option /> <h3>TUTORIAL BLOGGER</h3>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
</select></form>

Untuk menambahkan daftar, anda tinggal menambahkan lagi kode berikut :

<option value="ULR Artikel">Judul Artikel</option>

Mudah kan...??
Selamat mencoba dan Semoga bermanfaat....

Read more »

Cara Membuat Daftar Isi Slide In Page

Banyak tutorial blog yang membahas tentang daftar isi dan formatnya juga bermacam-macam, seperti daftar isi / sitemap dengan jquery accordion dan juga daftar isi perlabel, daftar isi dan lain-lain. Nah kali ini Blogger Bondowoso akan share tentang cara membuat daftar isi dengan slide in page. Sesuai dengan judulnya kalau daftar isi ini menggunakan slide di homepage / halaman utama blog. Apabila anda penasaran bagaimana bentuk / format daftar isi slide in page, simak cara membuatnya dibawah ini.

Cara Membuat Daftar Isi Slide In Page :

1. Langsung aja menuju Templates
2. Pilih Edit HTML => Lanjutkan
3. Cari kode </head> dan letakkan kode dibawah ini diatasnya

<style>#contentwrapper{width: 170px;height: 190px;border: 0px solid black;background-color: #ffffff;padding: 0px;}
.billcontent{width: 100%;display:block;}</style>

4. Simpan dulu template anda
5. Lalu masuk ke dasboard blogger lagi
- Pilih Tata Letak
- Pilih Tambah Gadget
- Pilih HTML/JavaScript dan masukkan kode berikut kedalamnya

<script type="text/javascript">
var billboardeffects=["GradientWipe(GradientSize=1.0 Duration=0.7)", "Inset", "Iris", "Pixelate(MaxSquare=5 enabled=false)", "RadialWipe", "RandomBars", "Slide(slideStyle='push')", "Spiral", "Stretch", "Strips", "Wheel", "ZigZag"]
//var billboardeffects=["Iris"] //Uncomment this line and input one of the effects above (ie: "Iris") for single effect.
var tickspeed=5000 //ticker speed in miliseconds (2000=2 seconds)
var effectduration=500 //Transitional effect duration in miliseconds
var hidecontent_from_legacy=1 //Should content be hidden in legacy browsers- IE4/NS4 (0=no, 1=yes).
var filterid=Math.floor(Math.random()*billboardeffects.length)
document.write('<style type="text/css">\n')
if (document.getElementById)
document.write('.billcontent{display:none;\n'+'filter:progid:DXImageTransform.Microsoft.'+billboardeffects[filterid]+'}\n')
else if (hidecontent_from_legacy)
document.write('#contentwrapper{display:none;}')
document.write('</style>\n')
var selectedDiv=0
var totalDivs=0
function contractboard(){
var inc=0
while (document.getElementById("billboard"+inc)){
document.getElementById("billboard"+inc).style.display="none"
inc++
}
}
function expandboard(){
var selectedDivObj=document.getElementById("billboard"+selectedDiv)
contractboard()
if (selectedDivObj.filters){
if (billboardeffects.length>=2){
filterid=Math.floor(Math.random()*billboardeffects.length)
selectedDivObj.style.filter="progid:DXImageTransform.Microsoft."+billboardeffects[filterid]
}
selectedDivObj.filters[0].duration=effectduration/1000
selectedDivObj.filters[0].Apply()
}
selectedDivObj.style.display="block"
if (selectedDivObj.filters)
selectedDivObj.filters[0].Play()
selectedDiv=(selectedDiv<=totalDivs-2)? selectedDiv+1 : 0
setTimeout("expandboard()",tickspeed)
}
function startbill(){
while (document.getElementById("billboard"+totalDivs)!=null)
totalDivs++
if (document.getElementById("billboard0").filters)
tickspeed+=effectduration
expandboard()
}
if (window.addEventListener)
window.addEventListener("load", startbill, false)
else if (window.attachEvent)
window.attachEvent("onload", startbill)
else if (document.getElementById)
window.onload=startbill
</script>
<script>
function rp(json) {
document.write('<div id="contentwrapper">');
for (var i = 0; i <= json.feed.openSearch$totalResults.$t - 1; i++) {
document.write('<div id="billboard' + i + '" class="billcontent">');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k <= entry.link.length - 1; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(Readmore)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);
if (showpostdate == true)
document.write('<br/>');
document.write(cdyear + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
document.write('<br><br/>');
if (postcontent.length <= numchars -1) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</div>');
}
document.write('</div>');
}
</script>
<script>
var showpostdate = true;
var showpostsummary = true;
var numchars = 150;
</script>
<script src="http://programkudulu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

Keterangan :
Ganti url programkudulu dengan url blog anda
6. Simpan

Demikianlah tutorial blog mengenai Cara Membuat Daftar Isi Slide In Page, semoga bermanfaat untuk anda semua, happy blogging.

sumber: http://bloggerbondowoso24.blogspot.com/2013/03/cara-membuat-daftar-isi-slide-in-page.html

Read more »

Cara Membaca dan Membuat Barcode

 

Halo semua, sadarkah kalian, disetiap produk yang kita gunakan terdapat barcode? Kalau kita sering berbelanja di supermarket atau swalayan, biasanya barang-barang di sana sudah ditempeli dengan kode batang atau barcode di bungkusnya. Tujuannya tidak lain adalah untuk mengotomatiskan sistem pemeriksaan di swalayan. Di samping itu barcode juga banyak digunakan di bidang lain sebagai ID unik untuk memudahkan pengindentifikasian.

          Sebenarnya yang dapat membaca dan membuat kode tersebut bukan hanya perusahaan atau supermarket saja kok, kita juga bisa. Entah untuk pengkodean nama kita, blog, atau pesan rahasia. Nah, untuk itu kali ini ane akan memberikan informasi untuk membaca dan membuat barcode tersebut. Simak ya...

Cara Membuat Barcode Sendiri :

• Pertama-tama kalian dapat mengunjungi Web Online Barcode Generator
• Kedua, masukkan kata atau kalimat yang ingin kalian ubah menjadi barcode pada kolom yang tersedia
• Simpan hasil gambarnya dalam format .jpeg atau .png
• Terakhir, print gambar tersebut dan tempelkan ditempat yang kalian inginkan.

Cara Membaca Barcode :

1. Perhatikan garis pada barcode. 
2. Barcode terdiri dari garis hitam dan putih. Ruang putih di antara garis-garis hitam adalah bagian dari kode. 
3. Ada perbedaan ketebalan garis. Garis paling tipis = “1”, yang sedang = “2”, yang lebih tebal = “3”, dan yang paling tebal = “4”.
4. Setiap digit angka terbentuk dari urutan empat angka. 0 = 3211; 1 = 2221; 2 = 2122; 3 = 1411; 4 = 1132; 5 = 1231; 6 = 1114; 7 = 1312; 8 = 1213; 9 = 3112.

Standar barcode retail di Eropa dan seluruh dunia kecuali Amerika dan Kanada adalah EAN (European Article Number) – 13. EAN-13 standar terdiri dari :

1. Kode negara atau kode sistem: 2 digit pertama barcode menunjukkan negara di mana manufacturer terdaftar
2. Manufacturer Code: Ini adalah 5 digit kode yang diberikan pada manufacturer dari wewenang penomoran EAN.
3. Product Code: 5 digit setelah manufacturer code. Nomor ini diberikan manufacturer untuk merepresentasikan suatu produk yang spesifik.
4. Check Digit atau Checksum: Digit terakhir dari barcode, digunakan untuk verifikasi bahwa barcode telah dipindai dengan benar.

Cara Praktis Membaca Barcode :

          Ternyata ada cara praktis untuk menerjemahkan barcode, Anda bisa menggunakan barcode decoder dari zxing. Cukup upload gambar barcode yang telah Anda buat tadi ke sini dan Anda bisa langsung tahu arti dari barcode tersebut.

          Melihat dan mengetahui produk itu berasal dari negara mana, kita bisa membacanya dengan 3 digit pertama barcode tersebut. contoh yang dilingkar merah :

          Barcode atau kode baris yang muncul pada barang yang diproduksi mengikuti aturan internasional yang ditetapkan. Kita mengenal EAN (European Article Number) yang memberikan informasi sistem pengkodean. Barcode aturan yang ditetapkan terdiri dari 13 digit, yaitu kode negara, kode perusahaan, kode produk, dan cek digit. Indonesia memiliki kode awal 899. Artinya barang buatan Indonesia atau diproduksi di Indonesia akan diawali dengan kode ini. Kode ini dipakai untuk kepentingan perdagangan internasional.

Kode Negara Dalam Barcode :

          Negara asal sebuah produk bisa dengan mudah kita kenali dari barcode-nya. Misalnya, barcode dengan awalan 690, 691 atau 692 adalah made in China. Sedangkan barcode dengan awalan 899 adalah made in Indonesia. Berikut ini adalah kode-kode negara yang digunakan pada barcode.

00-13: USA & Canada
20-29: In-Store Functions
30-37: France
40-44: Germany
45: Japan (also 49)
46: Russian Federation
471: Taiwan
474: Estonia
475: Latvia
477: Lithuania
479: Sri Lanka
480: Philippines
482: Ukraine
484: Moldova
485: Armenia
486: Georgia
487: Kazakhstan
489: Hong Kong
49: Japan (JAN-13)
50: United Kingdom
520: Greece
528: Lebanon
529: Cyprus
531: Macedonia
535: Malta
539: Ireland
54: Belgium & Luxembourg
560: Portugal
569: Iceland
57: Denmark
590: Poland
594: Romania
599: Hungary
600 & 601: South Africa
609: Mauritius
611: Morocco
613: Algeria
619: Tunisia
622: Egypt
625: Jordan
626: Iran
64: Finland
690-692: China
70: Norway
729: Israel
73: Sweden
740: Guatemala
741: El Salvador
742: Honduras
743: Nicaragua
744: Costa Rica
746: Dominican Republic
750: Mexico
759: Venezuela
76: Switzerland
770: Colombia
773: Uruguay
775: Peru
777: Bolivia
779: Argentina
780: Chile
784: Paraguay
785: Peru
786: Ecuador
789: Brazil
80 – 83: Italy
84: Spain
850: Cuba
858: Slovakia
859: Czech Republic
860: Yugoslavia
869: Turkey
87: Netherlands
880: South Korea
885: Thailand
888: Singapore
890: India
893: Vietnam
899: Indonesia
90 & 91: Austria
93: Australia
94: New Zealand
955: Malaysia
977: International Standard Serial Number for Periodicals (ISSN)
978: International Standard Book Numbering (ISBN)
979: International Standard Music Number (ISMN)
980: Refund receipts
981 & 982: Common Currency Coupons
99: Coupons

          Baiklah, sekian informasi yang saya berikan hari ini tentang cara membaca dan membuat barcode. Semoga informasi ini dapat bermanfaat dan mohon maaf atas segala kekurangan ane.

sumber

Read more »

Cara Membuat Tweet Box Melayang Di Blog

OK langsung saja kita mulai Cara Membuat Tweet Box Melayang (Floating) Di Blog. Pada Tutorial ini saya akan mengkombinasikan Tweet Box Melayang dengan Twitter Counter di Blog.

Langkah-Langkahnya:

1.  Pergi ke TKP (http://twittercounter.com/) tepatnya hehe, lalu Signin dengan akun twitter kita

2.  Jika sudah Lalu klik My Widget, Lalu Klik Widget Setting and Code, sesuaikan dengan selera dan tampilan blog kita, jika sudah pas lalu copy kode script widget yang telah disediakan

3.  Lalu letakkan/pastekan di dalam kode script di bawah ini:

<style type="text/css">
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV9oq4lVUvT7nLip3GWaBGD_NDhzxcZlbyFmt6cDZDuXc5AE9HdjWQbhOiPdkcbkGIrDxDC-LVsOC9t-1OVQK-p2fQAj9bPjpHvsw70-oBxuRUma-lUS7MbH48a_-_wUiurJSAfgWpGHJB/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Q6E-NeP8TnH-FIkkze4DRIz6PX0uP-PC_SmLT8dJfR2rAIzrI-sEvqgbz_l3Spm6g3wul0UbWXqIA-13wX2Qi_yr500U1Axsk4KPB3ypjl6MkWBb0tXnurQ2bWgAo4d7nCL0-1h9D9KV/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
</style>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
PASTEKAN KODE SRIPT'A DISINI
</div>
</div>

Ganti Bacaan "Pastekan Kode Sript'a Disini" dengan kode yang telah di dapatkan sebelumnya.

4.  Proses selanjutnya Login ke akun Blogger

5.  Dashboard > pilih "Design/Tata Letak"

6.  Lalu Klik "Add/Tambah Gadget"

7.  Kemudian pilih dan Klik "HTML/Javascript"

8.  Terakhir copy kode script yang telah digabungkan (Script Tweet Box & Script Twitter Counter) lalu pastekan pada "HTML/Javascript". Simpan. Dan Lihat hasilnya

Selamat Tweet Box Melayang'a telah berhasil di pasang. Selamat Mencoba Semoga berhasil.

sumber: http://www.abyfarhan.com/2012/01/cara-membuat-tweet-box-melayang-di-blog.html

Read more »

Cara Membuat Widget 3 in 1 Melayang (Blogger, Twitter, Facebook)

Kali ini saya akan share lagi tentang Widget 3 in 1 Floating yang sangat menarik dan Efektif ini kepada kalian semua. Widget 3 in 1 floating yang menurut saya merupakan salah satu widget blogger terbaik di tahun 2012 ini. 3 buah widget melayang yang digabung dalam 1 gadget. Demo penerapan widget melayang (floating widget) ini bisa sobat lihat disamping sidebar kanan blog ini. Seperti apa Cara membuat widget Follower Blogger, status Twitter dan Facebook Like, sekarang waktunya kita bedah bersama sama Widget ini dalam Tips dan Trik NgeBlog Kertas Kecil Kita ini.

Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box :
1.   Login ke dashboard blogger anda, pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).

2.       Copy script master widget dibawah ini dan paste pada gadget.

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCR7Oo6W7Tvk4m9RCyCc2ukXTiZ5yCLUu343Zgvku6Da6ejTd1HTKp-4dI8M18_3702mYu22aFgef7t_XkgvxFjM3q321sxyZj0WOTTv_XHA6Lc0FOg0khZySKMBqw_FWyZtZDF_WkVHtu/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEnHgVB3g24yLRxwMhLcFzwrsIpgT_Iu_w45ivjzwC4Z0-Flq4eqBleAuFrGyFmdAFrronaNrg6uVrme2I4xsSaDGZhuaPUggj5SZ-xcQB16V9oAc1_cUcWDYBx6k4v1wcxh1-ap62FzD1/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV9oq4lVUvT7nLip3GWaBGD_NDhzxcZlbyFmt6cDZDuXc5AE9HdjWQbhOiPdkcbkGIrDxDC-LVsOC9t-1OVQK-p2fQAj9bPjpHvsw70-oBxuRUma-lUS7MbH48a_-_wUiurJSAfgWpGHJB/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Q6E-NeP8TnH-FIkkze4DRIz6PX0uP-PC_SmLT8dJfR2rAIzrI-sEvqgbz_l3Spm6g3wul0UbWXqIA-13wX2Qi_yr500U1Axsk4KPB3ypjl6MkWBb0tXnurQ2bWgAo4d7nCL0-1h9D9KV/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDjVojEnxQwvBUrOJK-Lzkwjw3rWyZDEwv1dAMPfWw72qQiwgqjNVKH0vC5zgi28_4zFZGrap5kGlIREk-Mp435B_ne9FqOSiW8kRQAIpVUGhcTTvRZ045IeJUiM7dAvyz_LIlqidxT6sV/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2zuF1F5VRXmL4Ed-guyDFvHqs_skp0vlXC-IgE3ZIAws3Ye-2CA0swuOaJLcrAvh1v4hAk0q2Q8UUf6xFz8H_IddjhSM9UC54IBV68s_11sLY3N0o1GJiBtsvNEErB36w_CE06Pm7mg1Q/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
CONTENT BLOGGER HERE
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
CONTENT TWITTER HERE
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
CONTENT FACEBOOK HERE
</div>
</div>

3.       Kustomisasi widget :

• Ganti tulisan CONTENT BLOGGER HERE dengan kode HTML Google Friend Connect anda.
• Ganti tulisan CONTENT TWITTER HERE dengan kode HTML widget status Twitter anda.
• Ganti tulisan CONTENT FACEBOOK HERE dengan kode HTML Facebook Like Box anda.

4.      Bentuk akhir dari kode script ini ( Final Code ) akan menjadi seperti script widget milik saya dibawah ini :

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCR7Oo6W7Tvk4m9RCyCc2ukXTiZ5yCLUu343Zgvku6Da6ejTd1HTKp-4dI8M18_3702mYu22aFgef7t_XkgvxFjM3q321sxyZj0WOTTv_XHA6Lc0FOg0khZySKMBqw_FWyZtZDF_WkVHtu/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEnHgVB3g24yLRxwMhLcFzwrsIpgT_Iu_w45ivjzwC4Z0-Flq4eqBleAuFrGyFmdAFrronaNrg6uVrme2I4xsSaDGZhuaPUggj5SZ-xcQB16V9oAc1_cUcWDYBx6k4v1wcxh1-ap62FzD1/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV9oq4lVUvT7nLip3GWaBGD_NDhzxcZlbyFmt6cDZDuXc5AE9HdjWQbhOiPdkcbkGIrDxDC-LVsOC9t-1OVQK-p2fQAj9bPjpHvsw70-oBxuRUma-lUS7MbH48a_-_wUiurJSAfgWpGHJB/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Q6E-NeP8TnH-FIkkze4DRIz6PX0uP-PC_SmLT8dJfR2rAIzrI-sEvqgbz_l3Spm6g3wul0UbWXqIA-13wX2Qi_yr500U1Axsk4KPB3ypjl6MkWBb0tXnurQ2bWgAo4d7nCL0-1h9D9KV/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDjVojEnxQwvBUrOJK-Lzkwjw3rWyZDEwv1dAMPfWw72qQiwgqjNVKH0vC5zgi28_4zFZGrap5kGlIREk-Mp435B_ne9FqOSiW8kRQAIpVUGhcTTvRZ045IeJUiM7dAvyz_LIlqidxT6sV/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2zuF1F5VRXmL4Ed-guyDFvHqs_skp0vlXC-IgE3ZIAws3Ye-2CA0swuOaJLcrAvh1v4hAk0q2Q8UUf6xFz8H_IddjhSM9UC54IBV68s_11sLY3N0o1GJiBtsvNEErB36w_CE06Pm7mg1Q/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-3587425820990824703" style="width:250px;border:1px solid #ff0000;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#ff0000';
skin['ENDCAP_BG_COLOR'] = '#ffffff';
skin['ENDCAP_TEXT_COLOR'] = '#ff0000';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#000000';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#ffffff';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#ffffff';
skin['CONTENT_HEADLINE_COLOR'] = '#ff0000';
skin['NUMBER_ROWS'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-3587425820990824703',
   site: '12625880981379543615' },
  skin);
</script>
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('KertasKecilKita').start();
</script>
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FKertas-Kecil-Kita%2F252332308146760&amp;width=250&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;appId=286045748116584" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:290px;" allowtransparency="true"></iframe>
</div>
</div>

5.      Jika sudah selesai melakukan kustomisasi, Save / Simpan gadget dan lihat hasilnya.

Read more »

Cara Menambahkan Google Friend Connect Pada Blog

kali ini saya akan share tentang Cara Menambahkan Google Friend Connect Pada Blog.

Langsung saja ini Cara Menambahkan Google Friend Connect Pada Blog :

1.       Login ke Google Friend Connect menggunakan akun blogger/ gmail anda.

2.       Klik nama blog anda pada sidebar kiri dan pilih Add the member gadget.

3.       Bila sudah masuk pada Gadget / Anggota Langkah selanjutnya :

• Pilih ukuran Gadget yang sobat inginkan lalu pilih deretan wajah sesuai sobat juga.

• Kemudian pilih pilihan warna sesuai keinginan sobat, Anda akan dibawa ke halaman kustomisasi gadget seperti gambar dibawah ini. Lakukan kustomisasi lebar gadget, jumlah baris follower yang ingin ditampilkan, warna background, border, huruf dan lain-lain dihalaman ini. :

• Jika sudah buat kode HTML dan Copy pastekan pada blog anda, maka kode HTML gadget follower / Google Friend Connect milik anda sudah selesai dan siap ditayangkan.

SEKIAN TERIMAKASIH

SEMOGA BERMANFAAT

Read more »